<template>
  <div>
    <NavTop class="navtop-contacts">
        <BackBtn/>
        <div class="navtop-title">{{ $route.params.type }}</div>
    </NavTop>
    <main>
        <!-- 无申请通知 -->
        <div class="no-notice" v-if="!applyList.length">暂无{{ $route.params.type==='新朋友' ? '好友' : '群' }}通知</div>
        <!-- 有申请通知 -->
        <ul class="notice-content" v-else>
            <li class="notice-item" v-for="(item, index) in applyList" :key="index">
                <img :src="$baseUrl + `${$route.params.type==='新朋友' ? item.friendId.imgUrl : item.userId.imgUrl}`" alt="">
                <div class="user-info">
                    <div class="nick">{{ $route.params.type==='新朋友' ? item.friendId.nick : item.userId.nick }}</div>
                    <div class="from" v-if="$route.params.type==='群通知'">来自 {{ item.groupId.groupName }} 的群</div>
                </div>
                <div class="agree-btn" @click="agreeApplyBtn(item, index)">添加</div>
            </li>
        </ul>
    </main>
  </div>
</template>

<script>
import NavTop from '@/components/NavTop'
import BackBtn from '@/components/BackBtn'
import { reqGetFriendNoAgree, reqAgreeFriendApply, reqGetGroupNoAgree, reqAgreeGroupApply } from '@/api'
import { mapState } from 'vuex'
import { Toast } from 'vant'
export default {
    components: {
        NavTop,
        BackBtn
    },
    data() {
        return {
            applyList: []  // 申请列表
        }
    },
    computed: {
        ...mapState({
            userId: state => state.login.userInfo._id
        })
    },
    methods: {
        // 获取好友申请列表
        async getFriendNoAgree() {
            let res = await reqGetFriendNoAgree({userId: this.userId})
            if (res.status === 200) {
                this.applyList = res.data
            } else {
                Toast(res.msg)
            }
        },
        // 获取群申请列表
        async getGroupNoAgree() {
            let res = await reqGetGroupNoAgree({userId: this.userId})
            if (res.status === 200) {
                this.applyList = res.data
            } else {
                Toast(res.msg)
            }
        },
        // 同意申请按钮
        async agreeApplyBtn(item, index) {
            const { type } = this.$route.params
            if (type === '新朋友') {
                // 同意好友申请
                let ids = {
                    userId: this.userId,
                    friendId: item.friendId._id
                }
                let res = await reqAgreeFriendApply(ids)
                if (res.status === 200) {
                    this.applyList.splice(index, 1)
                    this.$store.commit('notice/updateFriendNoticeNum')
                }
                Toast(res.msg)
            } else {
                // 同意入群申请
                let ids = {
                    userId: item.userId._id,
                    groupId:item.groupId._id
                }
                let res = await reqAgreeGroupApply(ids)
                if (res.status === 200) {
                    this.applyList.splice(index, 1)
                    this.$store.commit('notice/updateGroupNoticeNum')
                }
                Toast(res.msg)
            }
        }
    },
    mounted() {
        if (this.$route.params.type==='新朋友') {
            this.getFriendNoAgree()
        } else if (this.$route.params.type==='群通知') {
            this.getGroupNoAgree()
        }
    }
}
</script>

<style lang="less" scoped>
.navtop-contacts {
    position: fixed;
    top: 0;
    left: 0;
}
main {
    width: 100%;
    height: 100vh;
    background-color: #f6f6f6;
    padding: 1.6rem 0 0;
    box-sizing: border-box;
    .no-notice {
        width: 100%;
        height: 2.4rem;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .4rem;
        color: #979696;
    }
    .notice-content {
        width: 100%;
        padding: 0 .4rem;
        background-color: #fff;
        box-sizing: border-box;
        .notice-item {
            width: 100%;
            height: 2.2667rem;
            display: flex;
            align-items: center;
            img {
                width: 1.6rem;
                height: 1.6rem;
                border-radius: 50%;
                margin-right: .2rem;
            }
            .user-info {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding: .4rem 0;
                box-sizing: border-box;
                .nick {
                    font-size: .4rem;
                }
                .from {
                    color: #838383;
                }
            }
            .agree-btn {
                width: 1.5333rem;
                height: .7333rem;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #bfdafa;
                color: #1f79e7;
            }
        }
    }
}
</style>